<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>传悦案例</title>
		<link rel="stylesheet" href="iconfont/iconfont.css">
		<link rel="stylesheet" type="text/css" href="css/projectList.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
	</head>
	<body>
		<header>
			<div class="head">
				<div class="content">
					<img src="img/logo.png">
					<ul>
						<li><a href="index.html">网站首页</a></li>
						<li><a href="">传悦资源</a></li>
						<li><a href="">传悦案例</a></li>
						<li><a href="">传悦服务</a></li>
						<li><a href="solutionList.html">解决方案</a></li>
						<li><a href="">需求提交</a></li>
					</ul>
					<div class="content-iconfont">
						<span class="iconfont icon-dianhua"></span>
						<span class="num">0535-60652189</span>
						<span class="iconfont icon-qq"></span>
						<span class="iconfont icon-wb"></span>
						<span class="iconfont icon-weixin"></span>
						<span class="iconfont icon-youxiang"></span>
					</div>
				</div>
			</div>
			<div class="foot">
				<ul>
					<li><a href="">网站首页</a></li>
					<li>></li>
					<li><a href="">传悦案例</a></li>
				</ul>
			</div>
		</header>
		<main>
			<ul class="head">
				<li>全部</li>
				<li>网站建设</li>
				<li>推广运营</li>
				<li>品牌策划</li>
				<li>网络全案</li>
			</ul>
			<div class="content">
				<a id="template">
					<figure>
						<img>
					</figure>
						<figcaption>
							<div class="top">
								<span></span>
							</div>
							<div class="bottom">
								<span></span>
							</div>
						</figcaption>
				</a>
			</div>
			<ul class="main-nav">
				<li>
					<</li> <li>1
				</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>></li>
			</ul>
		</main>
		<footer>
			<div class="content">
				<img src="img2/logo_03.png">
				<div class="txt">
					<ul>
						<li>关于传悦</li>
						<li>新闻动态</li>
						<li>传悦观点</li>
						<li>联系传悦</li>
						<li>加入传悦</li>
						<li>付款账户</li>
					</ul>
					<br>
					<p>Copyright &copy2013 &nbsp创新网络科技有限责任公司&nbsp ||&nbsp 传悦 Chnyoo.cn All Rights Reserved &nbsp 京ICP备12005221号</p>
				</div>
			</div>
		</footer>
		<script type="text/javascript">
			let main=document.querySelector("main")
			let content=main.querySelector(".content")
			let template=document.querySelector("#template")
			let http=new XMLHttpRequest();
			http.open("get","http://10.35.164.6:8080/projectL");
			http.send();
			http.onreadystatechange = function(){
				if(http.readyState=== 4){
					let project=JSON.parse(http.responseText);
					project.forEach(function(item,index){
						let newItem=template.cloneNode(true);
						newItem.id="";
						content.appendChild(newItem);
						newItem.querySelectorAll("span")[0].innerHTML =item.title;
						newItem.querySelectorAll("span")[1].innerHTML=item.txt;
						newItem.querySelector("img").src=item.img;
						// img2/案例1.png
						let id=item.id
						newItem.href=`http://10.35.164.6/111/projectDetail.html?id=${id}`
				})
				}
			}
		</script>
	</body>
</html>